<!--
* @Author: xzh
* @Date: 2021-05-21 00:31:25
* @LastEditTime: 2021-05-21 10:09:32
* @LastEditors: xzh
* @Description: 组件描述
* @FilePath: /文件路径.vue
* 代码版权方：'政府采购信息网'
-->
<template>
<div>
     <el-card>
     <el-form :inline="true">
         <el-row>
             <el-col :span="20">
                <el-form-item label="栏目名称">
                    <el-input v-model="queryParam.searchTitle" style="width:250px"></el-input>
                </el-form-item>
                
                <el-form-item label="授课对象" >
                    <el-select v-model="queryParam.columnStudent" style="width:150px">
                        <el-option v-for="item in teachObjects" :key="item.value" :label="item.label" :value="item.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="queryParam.columnType" style="width:150px">
                        <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="属性">
                    <el-select v-model="queryParam.columnProperty" style="width:150px">
                        <el-option v-for="item in attributeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="queryParam.columnStatus" style="width:150px">
                        <el-option v-for="item in stateOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
             </el-col>
             <el-col :span="4">
                <el-button :icon="showMoreSearch?'el-icon-caret-bottom':'el-icon-caret-top'"
                            @click="showMoreSearch = !showMoreSearch"></el-button>
                <el-button type="primary" @click="reSearchAction">重置</el-button>
                <el-button type="primary" @click="searchAction">查询</el-button>
             </el-col>
             <div v-show="showMoreSearch">
                 <el-col :span="20">
                    <el-form-item label="上线时间">
                        <el-select v-model="queryParam.columnPublishYear" style="width:80px">
                            <el-option v-for="item in onlineTime" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="讲师">
                        <el-select v-model="queryParam.columnLecturerId" filterable>
                            <el-option v-for="item in teachOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="适合省份">
                        <el-select filterable v-model="queryParam.columnProvince" style="width:100px">
                            <el-option v-for="item in provinceOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="法律法规">
                        <el-select v-model="queryParam.columnLabel" style="width:500px">
                            <el-option v-for="item in lawOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="">
                        <el-select v-model="queryParam.timeType">
                            <el-option v-for="item in timeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                        <el-date-picker v-model="queryParam.timeRange" type="datetimerange"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
                        <!-- value-format="yyyy-MM-dd HH:mm:ss" -->
                    </el-form-item>
                </el-col>
             </div>
         </el-row>
     </el-form>
 </el-card>
<el-card >
    <div slot="header">
        <span style="color:#00000000">.</span>
        <el-button style="float: right;" size="mini" @click="moreDisableAction">批量禁用</el-button>
        <el-button style="float: right; margin-right: 10px;" size="mini" @click="moreEnableAction">批量启用</el-button>
        <el-button style="float: right;" size="mini" @click="addColumn">新建栏目</el-button>
    </div> 
    <el-table :data="dataSource.value" @selection-change="tableSelectChange" border style="width: 100%">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="序号" type="index" width="75" align="center"></el-table-column>
        <el-table-column label="栏目名称" prop="columnName" align="center"></el-table-column>
        <el-table-column label="讲师" prop="columnLecturerId" align="center">
            <template slot-scope="scope">
                {{makeColumnLecturer(scope.row.columnLecturerId)}}
            </template>
        </el-table-column>
        <el-table-column label="视频总时长" prop="columnVideoTotal" width="100" align="center">
            <template slot-scope="scope">{{makeTimeStr(scope.row.columnVideoTotal)}}</template>
        </el-table-column>
        <el-table-column label="上线时间" width="80" align="center">
            <template slot-scope="scope">
                {{scope.row.columnPublishYear}}
            </template>
        </el-table-column>
        <el-table-column label="更新时间" width="100" align="center">
            <template slot-scope="scope">
                {{scope.row.updateTime ? new Date(scope.row.updateTime).Format("yyyy-MM-dd hh:mm:ss") : ''}}
            </template>
        </el-table-column>
        <el-table-column label="授课对象" align="center">
            <template slot-scope="scope">
                {{makeColumnStudentStr(scope.row.columnStudent)}}
            </template>
        </el-table-column>
        <el-table-column label="适合省份" prop="columnProvinceStr" width="100" align="center"></el-table-column>
        <el-table-column label="类型" prop="columnType" width="85" align="center">
            <template slot-scope="scope">
                {{makeColumnTypeStr(scope.row.columnType)}}
            </template>
        </el-table-column>
        <el-table-column label="属性" width="80" align="center">
            <template slot-scope="scope">
                {{makeColumnPropertyStr(scope.row.columnProperty)}}
            </template>
        </el-table-column>
        <el-table-column label="状态" width="75" align="center">
            <template slot-scope="scope">
                <el-switch v-model="scope.row.columnStatus" :active-value="1" :inactive-value="0"
                           @change="columnStatusChange($event, [scope.row.id])"></el-switch>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="75" align="center">
            <template slot-scope="scope">
                <el-button size="mini" @click="columnInfoAction(scope.row.id)">查看</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination style="margin-top: 20px;"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="queryParam.pageNum"
      :page-size="queryParam.pageSize"
      :total="dataSource.total"
      :page-sizes="[12, 50, 100, 200]"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"/>
</el-card>
 
</div>

 
 
</template>
 
<script>
Date.prototype.Format = function (fmt) { //author: meizz
  var o = {
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
    "h+": this.getHours(), //小时
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    "S": this.getMilliseconds() //毫秒
  };
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  for (var k in o)
  if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  return fmt;
};
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { loadCmsLecturerDataList, loadCmsChinaList, loadCmsExamLabelList, loadCmsColumnList, batchReleaseCmsColumnData} from "@/api/study";
export default {
    components: {},
    props: [],
    data () {
        return {
            teachObjects:[
                {label: '不限', value: ''},
                {label: '采购人', value: 1},
                {label: '集采机构', value: 2},
                {label: '社会中介', value: 3},
                {label: '评审专家', value: 4},
                {label: '供应商', value: 5},
                {label: '监管部门', value: 6},
                {label: '其他', value: 7},
            ],
            typeOption:[
                {label: '请选择', value: ''},
                {label: '法规讲解', value: 1},
                {label: '案例讲解', value: 2},
                {label: '动漫视频', value: 3},
                {label: '实物讲解', value: 4},
                {label: '问答讲解', value: 5},
                {label: '其他', value: 6},
            ],
            attributeOption:[
                {label: '不限', value: ''},
                {label: '常规栏目', value: 1},
                {label: '特定栏目', value: 2},
            ],
            stateOption:[
                {label: '不限', value: ''},
                {label: '启用', value: 1},
                {label: '禁用', value: 0},
            ],
            onlineTime:[
                {label: '不限', value: ''},
                {label: '2019', value: '2019'},
                {label: '2020', value: '2020'},
                {label: '2021', value: '2021'},
                {label: '2022', value: '2022'},
                {label: '2023', value: '2023'},
                {label: '2024', value: '2024'},
                {label: '2025', value: '2025'},
                {label: '2026', value: '2026'},
            ],
            teachOption:[],
            provinceOption:[],
            lawOption:[],
            timeOption:[
                {label: '新建时间', value: 1},
                {label: '更新时间', value: 2},
            ],
            showMoreSearch: false,
            queryParam: {
                searchTitle:'',//查询字符
                columnStudent: '',//授课对象(1采购人2集采机构3社会中介4评审专家5供应商6监管部门7其它)
                columnType: '',//类型(1法规讲解2案例讲解3动漫视频4实务讲解5问答讲解6其它)
                columnProperty:'',//属性(1常用栏目2特定栏目)
                columnStatus: '',//可用状态
                columnPublishYear: '',//课程上线时间(年份)
                columnLecturerId: '',//授课讲师ID
                columnProvince: '',//所属省份ID
                columnLabel: '',//法律法规标签
                timeType:1,//时间查询类型(1创建时间2更新时间)
                timeRange: [],
                startTime: '',//开始时间
                endTime: '',//结束时间
                pageNum: 1,
                pageSize: 12,
                
            },
            dataSource:{
                value:[],
                select:[],
                total: 0,
            } ,
        }
    },
// 监听属性 类似于data概念
    computed: {}, 
// 监控data中的数据变化
    watch: {},
// 方法集合
    methods: {

        loadTeacherData( call ){
            loadCmsLecturerDataList({searchTitle: ''}).then(response => {
                if(response.code == 200){
                    this.teachOption = response.data;
                }else{
                    this.$message.warning(response.message);
                }
                call();
            }).catch(error => {
                console.log(error);
                this.$message.error(error);
            });
        },

        loadProvinceData(cell){
            loadCmsChinaList().then(response => {
                if(response.code == 200){
                    this.provinceOption = response.data
                }else{
                    this.$message.warning(response.message);
                }
                cell();
            }).catch(error => {
                console.log(error);
                this.$message.error(error);
            });
        },

        loadLawData(cell){
            loadCmsExamLabelList().then(response => {
                if(response.code == 200){
                    this.lawOption = response.data[0].children;
                }else{
                    this.$message.warning(response.message);
                }
                cell();
            }).catch(error => {
                console.log(error);
                this.$message.error(error);
            });
        },

        reSearchAction(){
            this.queryParam.searchTitle = '';//查询字符
            this.queryParam.columnStudent = '';//授课对象(1采购人2集采机构3社会中介4评审专家5供应商6监管部门7其它)
            this.queryParam.columnType = '';//类型(1法规讲解2案例讲解3动漫视频4实务讲解5问答讲解6其它)
            this.queryParam.columnProperty = '';//属性(1常用栏目2特定栏目)
            this.queryParam.columnStatus = '';//可用状态
            this.queryParam.columnPublishYear = '';//课程上线时间(年份)
            this.queryParam.columnLecturerId = '';//授课讲师ID
            this.queryParam.columnProvince = '';//所属省份ID
            this.queryParam.columnLabel = '';//法律法规标签
            this.queryParam.timeType = 1;//时间查询类型(1创建时间2更新时间)
            this.queryParam.timeRange = [];
            this.queryParam.startTime = '';//开始时间
            this.queryParam.endTime = '';//结束时间
        },

        searchAction(){
            if (this.queryParam.timeRange && this.queryParam.timeRange.length > 1) {
                this.queryParam.startTime =  this.queryParam.timeRange[0];
                this.queryParam.endTime = this.queryParam.timeRange[1];
            }else{
                this.queryParam.startTime = '';
                this.queryParam.endTime = '';
            }
            this.queryParam.pageNum = 1;
            this.loadData();
        },

        loadData(){
            loadCmsColumnList(this.queryParam).then(response => {
                if (response.code === "200"){
                    this.dataSource.value = response.data.list;
                    this.dataSource.total = response.data.total;
                    this.dataSource.select = [];
                } else {
                    this.$message.warning(response.message);
                }
            }).catch( error =>{
                console.log(error);
                this.$message.error(error);
            });
        },

        handleCurrentChange(val){
            this.queryParam.pageNum = val;
            this.loadData();
        },
        handleSizeChange(val){
            this.queryParam.pageSize = val;
            this.loadData();
        },

        makeColumnLecturer(val){
            var lecturers = val.split(',');
            if (lecturers) {
                var nl = [...new Set(lecturers)];
                return nl.join();
            }
            return val;
        },

        makeTimeStr(val){
            let h = parseInt(val / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            let m = parseInt(val / 60 % 60);
            m = m < 10 ? '0' + m : m;
            let s = parseInt(val % 60);
            s = s < 10 ? '0' + s : s;

            return h + ':' + m + ':' + s;
        },

        makeColumnStudentStr(val){
            var studentValue = val.split(',');
            var sv = studentValue;
            for (let i = 0; i < studentValue.length; i++) {
                const ie = studentValue[i];
                for (let j = 0; j < this.teachObjects.length; j++) {
                    const je = this.teachObjects[j];
                    if (ie == je.value+'') {
                        sv.splice(i, 1, je.label);
                    }
                }
            }
            return sv.join();
        },

        makeColumnTypeStr(val){
            var typeValue = val.split(',');
            var tv = typeValue;
            for (let i = 0; i < typeValue.length; i++) {
                const ie = typeValue[i];
                for (let j = 0; j < this.typeOption.length; j++) {
                    const je = this.typeOption[j];
                    if (ie == je.value+'') {
                        tv.splice(i, 1, je.label);
                    }
                }
            }
            return tv.join();
        },

        makeColumnPropertyStr(val){
            for (let i = 0; i < this.attributeOption.length; i++) {
                const element = this.attributeOption[i];
                if (val == element.value) {
                    return element.label;
                }
            }
            return '';
        },

        columnStatusChange(val, ids){
            console.log('switch',val, ids);
            var param = {ids:ids, columnStatus:val}
            batchReleaseCmsColumnData(param).then(response => {
                if (response.code === "200"){
                    this.$message.success(response.message);
                } else {
                    this.$message.warning(response.message);
                }
                this.searchAction();
            }).catch(error => {

            });
        },
        tableSelectChange(val){
            this.dataSource.select = val;
        },
        addColumn(){
            this.$jump.push({path: '/study/addColumn'});
        },

        moreDisableAction(){
            if (this.dataSource.select.length < 1) {
                this.$message.warning('请选择要修改的数据');
                return;
            }
            var ids = [];
            for (let i = 0; i < this.dataSource.select.length; i++) {
                const element = this.dataSource.select[i];
                ids.push(element.id);
            }
            this.columnStatusChange(0,ids);
        },

        moreEnableAction(){
            if (this.dataSource.select.length < 1) {
                this.$message.warning('请选择要修改的数据');
                return;
            }
            var ids = [];
            for (let i = 0; i < this.dataSource.select.length; i++) {
                const element = this.dataSource.select[i];
                ids.push(element.id);
            }
            this.columnStatusChange(1,ids);
        },

        columnInfoAction(columnId){
            this.$jump.push({path: '/study/editColumn',query:{columnId: columnId}});
        },
    },
/*------生命周期-------*/
//创建完成（可以访问当前this实例）
    created() {
        this.loadTeacherData(()=>{
            this.loadProvinceData(()=>{
                this.loadLawData(() => {
                    this.searchAction();
                });
            });
        });
    },
//挂载完成（可以访问DOM元素）
    mounted() {},
//创建之前
    beforeCreate() {},
//挂载之前
    beforeMount() {},
//更新之前
    updated() {},
//销毁之前
    beforeDestroy() {},
//销毁完成
    destroyed() {},
//如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
};
</script>
 
<style  scoped>

</style>